<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps API Example - Random Weather Map</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true"
            type="text/javascript"></script>
    <script src="<c:url value="resources/js/markermanager.js"/>"></script>
    <script type="text/javascript">
    //<![CDATA[

    var IMAGES = [ "1", "2", "3", "3" ];
    var ICONS = [];
    var map = null;
    var mgr = null;
    var barr = [ ] ;
    var lastI ;
    
 // Process onload...

    function firstTime(son)
    {
     var obj = JSON.parse(son);
     var myLatLng = new google.maps.LatLng(obj[0].lat,obj[0].lng);
     var myOptions = {
      zoom: 3,
      center: myLatLng,
      mapTypeControl: false,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DEFAULT},
      navigationControl: true,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.DEFAULT},
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      sensor: 'true'
     }
     map = new google.maps.Map(document.getElementById("map"), myOptions);

     // Load an array of 5 objects with markers spaced 5 degrees of longitude apart...

     for ( var i = 0; i < obj.length; i++ )
     {
      var xlat = obj[i].lat ;
      var xlng =  obj[i].lng ;
      barr[i] = new Object ;

      // Create the marker...

      var latlng = new google.maps.LatLng(xlat,xlng);
      var marker = new google.maps.Marker({
          position: latlng,
          visible: true,
          clickable: true,
          map: map
      }); 
      barr[i].marker = marker ;
      var content = '<div class="marker-content"><h3>' + obj[i].idPerretxiko + '</h3><p> Kopurua: '+ obj[i].kopurua +'</p>';
      barr[i].html = content;
    	 

      // Create the infoWindow...
      
      barr[i].infoWindow = new google.maps.InfoWindow({
       content: barr[i].html
      });

      // Create the listener with a closure...

      barr[i].listener = makeClosure(i, barr[i].marker) ;
     }
    }
 
 // Make a simple closure with the listener...

    function makeClosure( i, marker )
    {
     var listener = google.maps.event.addListener(marker, 'click', function() {
      openInfoWindow(i) ;		// <-- this is the key to making it work
     });
     return listener ;
    }

    // Open the infoWindow - called from the closure...

    function openInfoWindow(i)
    {
     if ( typeof(lastI) == 'number' && typeof(barr[lastI].infoWindow) == 'object' )
     { 
      barr[lastI].infoWindow.close() ;
     }
     lastI = i ;    
     barr[i].infoWindow.open(map,barr[i].marker) ;    
    }
    
    function getWeatherIcon() {
        var i = Math.floor(IMAGES.length*Math.random());
        if (!ICONS[i]) {
          var icon = new GIcon();
          icon.image = "<c:url value="resources/images/"/>" 
              + IMAGES[i] + ".png";
          icon.iconAnchor = new GPoint(16, 16);
          icon.infoWindowAnchor = new GPoint(16, 0);
          icon.iconSize = new GSize(32, 32);
          ICONS[i] = icon;
        }
        return ICONS[i];
      }
    
    
    
    //]]>
    </script>
  </head>

  <body onload="firstTime('<c:out value="${jsonOutput}"/>')" onunload="GUnload()">
    <div id="map" style="margin: 5px auto; width: 650px; height: 400px"></div>
    <div style="text-align: center; font-size: large;">
      Zeure Puntuak!
    </div>
  </body>
</html>
